<template>
    <div class='paySuccess'>
        <van-nav-bar left-arrow @click-left="backUrl" />
        <div class="content">
                <div style="height: 20px;width: 10px;"></div>
                <p class="success">支付成功</p>
                <div class="btn">
                    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round plain hairline
                        @click="backHome">
                        返回首页
                    </van-button>
                    <div style="display: inline-block;width: 30px;"></div>
                    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" round @click="$router.push('/order')">
                        查看订单
                    </van-button>
                </div>
            </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      show: true
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    backUrl () {
      this.$router.push({
        path: '/cart'
      })
    },
    backHome () {
      this.$router.push({
        path: '/home'
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.paySuccess {
  ::v-deep .van-icon-arrow-left {
    color: #333;
  }

  min-height: 100vh;
  background-color: #f7f7f7;

  .content {
    margin: 10px;
    background-color: #fff;
    border-radius: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;

    .success {
        text-align: center;
        font-size: 25px;
        font-weight: 700;
    }

    .btn {
        margin: 30px;
        text-align: center;
    }
  }
}
</style>
